<template>
  <view>
    <!-- 主体表单 -->
    <nav-bar></nav-bar>
    <view class="main1">
      <view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
      <view class="title_des">欢迎使用蛋糕甜心APP</view>
      <view class="item">
        <image
          class="login_image"
          src="../../static/login/userName.png"
        ></image>
        <input
          v-model.trim="userInfo.username"
          class="main-input"
          placeholder="请输入手机号"
        />
      </view>
      <view style="margin-top: 8px"></view>
      <view class="item">
        <image
          class="login_image"
          src="../../static/login/password.png"
        ></image>
        <input
          v-model.trim="userInfo.password"
          class="main-input"
          type="password"
          placeholder="请输入密码"
        />
      </view>
    </view>
    <view class="btn_login" @click="userLogin">登录</view>
    <!-- 底部信息 -->
    <view class="footer" style="margin-top: 16px">
      <view>
        <navigator url="/pages/personal/register" open-type="navigate"
          >新用户注册</navigator
        >
      </view>
      <view style="margin-left: 32%">
        <view>忘记密码</view>
      </view>
    </view>
    <view class="weixinLogin">
      <view
        style="
          border: 1upx inset;
          width: 30%;
          float: left;
          margin-top: 2%;
          margin-left: 3%;
          border-color: #f8f8f8;
        "
      ></view>
      第三方账号登录
      <view
        style="
          border: 1upx inset;
          width: 30%;
          float: right;
          margin-top: 2%;
          margin-right: 3%;
          border-color: #f8f8f8;
        "
      ></view>
    </view>
    <!-- 其他登录 -->
    <view class="other_login cuIcon">
      <view class="login_icon_wx" @click="wxLogin">
        <image
          style="width: 50px; height: 50px"
          src="../../static/wx.png"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        username: '',
        password: '',
      },
    }
  },
  methods: {
    // 用户登录
    async userLogin() {
      const { username, password } = this.userInfo
      if (!username || !password) {
        return uni.showToast({
          title: '请完整填写信息',
          duration: 2000,
          icon: 'none',
        })
      }

      const loginData = await this.$post('/1.1/login', {
        ...this.userInfo,
        isUser: true,
      })
      if (loginData.code) {
        const title = loginData.code == 211 ? '手机号有误' : '密码错误'
        return uni.showToast({
          title,
          duration: 2000,
          icon: 'none',
        })
      }
      // 存储用户信息到本地
      uni.setStorage({
        key: 'userInfo',
        data: loginData,
        success: () => {
          // 将用户信息存到vuex
          this.$store.commit('user/initUserInfo', loginData)

          uni.switchTab({
            url: '/pages/personal/personal',
          })
        },
      })
    },
    // 微信登录
    wxLogin() {
      uni.getProvider({
        service: 'oauth',
        success: res => {
          console.log(res)
        },
        fail: err => {
          console.log(err)
        },
      })
    },
  },
}
</script>

<style>
@import url('../../static/css/main.css');
@import url('../../static/css/icon.css');
page {
  padding-top: 60rpx;
}
.type {
  display: flex;
  margin-left: 16px;
  border-bottom: 1px solid #eeeeee;
  width: 100%;
}

.title_des {
  font-weight: bold;
  color: #0055b8;
  font-size: 22px;
  margin-bottom: 32px;
}

.login_icon_wx {
  color: #999999;
  border: none;
}

.weixinLogin {
  color: #999999;
  text-align: center;
  font-size: 12px;
  margin-top: 60px;
  left: auto;
  right: auto;
}

.footer_des {
  color: #666666;
  text-align: center;
  font-size: 14px;
  margin-top: 40px;
}

.getCode {
  font-size: 14px;
  margin-left: 40px;
  color: #0055b8;
}

.item {
  line-height: 40px;
  display: flex;
}

.login_image {
  margin-top: 8px;
  width: 20px;
  height: 25px;
}

.main-input {
  font-size: 14px;
  margin-left: 16px;
  border-bottom: 1px solid #eeeeee;
  height: 40px;
  line-height: 40px;
}

.main-input-code {
  width: 70%;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
}

.btn_login {
  color: #ffffff;
  font-size: 16px;
  width: 260px;
  height: 40px;
  background: #0055b8;
  border-radius: 8px;
  line-height: 40px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 45px;
}

.main-input {
  flex: 1;
  text-align: left;
  font-size: 28 upx;
  padding-right: 10 upx;
  margin-left: 20 upx;
}
</style>
